<template>
	<view class="page">
		第{{page}}页-第{{big_sort}}大区-第{{small_sort}}小区 第{{total_xh}}序号 正确单词{{true_wordHead}}
		<view class="" v-if="type==1">
			<view class="head">
				<view class="head_title text-center padding-10">
					一级测试·找家人
				</view>
				<view class="head_cont text-center padding-10">
					请选出与{{wordHead}}同区域的单词
				</view>
			</view>
			<view class="word_lists flex space-between flex-wrap">
				<view class="word_list text-center marginBottom-20" v-for="(i,v) in options" :key="v"
					:class="current==v?'hover':''" @click="tabsClick(i,v)">
					{{i.wordHead}}
				</view>
			</view>
		</view>
		<view class="" v-if="type==2">
			<view class="head">
				<view class="head_title text-center padding-10">
					二级测试·找大区域号
				</view>
				<view class="head_cont text-center padding-10">
					请选出与<text style="color: skyblue;">{{wordHead}}</text>所在<text style="color: red;">大</text>区域
				</view>
			</view>
			<view class="word_lists flex space-between flex-wrap">
				<view class="word_list2 text-center marginBottom-20" v-for="(i,v) in options2" :key="v"
					:class="current2==v?'hover':''" @click="tabsClick2(i,v)">
					{{i.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="type==3">
			<view class="head">
				<view class="head_title text-center padding-10">
					三级测试·找小区块号
				</view>
				<view class="head_cont text-center padding-10">
					请选出与<text style="color: skyblue;">{{wordHead}}</text>所在<text style="color: red;">小</text>区域
				</view>
			</view>
			<view class="word_lists flex space-between flex-wrap">
				<view class="word_list2 text-center marginBottom-20" v-for="(i,v) in options2" :key="v"
					:class="current3==v?'hover':''" @click="tabsClick3(i,v)">
					{{i.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="type==4">
			<view class="head">
				<view class="head_title text-center padding-10">
					四级测试·找序号
				</view>
				<view class="head_cont text-center padding-10">
					请选出与<text style="color: skyblue;">{{wordHead}}</text>序号
				</view>
			</view>
			<view class="word_lists word_lists_other flex space-between flex-wrap">
				<view class="word_list4 text-center marginBottom-20" v-for="(i,v) in sortList" :key="v"
					:class="current4==v?'hover':''" @click="tabsClick4(i,v)">
					{{i.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="type==5">
			<view class="head">
				<view class="head_title text-center padding-10">
					五级测试·找序号
				</view>
				<view class="head_cont text-center padding-10">
					请选出与<text style="color: skyblue;">{{wordHead}}</text>所在页码
				</view>
			</view>
			<view class="word_lists word_lists_other flex  flex-wrap">
				<view class="word_list5 text-center marginBottom-20 marginRight-1" v-for="(i,v) in max_page" :key="v"
					:class="current5==v?'hover':''" @click="tabsClick5(i,v)">
					第{{i}}页
				</view>
			</view>
		</view>
		<view class="head " v-if="type==6">
			<view class="word_name marginBottom-20">
				{{wordHead}}
			</view>
			<view class="flex space-between items-center marginBottom-10" @click="playClick()">
				<view class="word_pro">
					/音标/
				</view>
				<view class="">
					{{page}}-{{big_sort}}-{{small_sort}}
				</view>
			</view>
			<view class="word_warn ">
				先回想词义再选择，想不起来看【提示】
			</view>
			<view class=" select_lists">
				<view class="select_list marginTop-20" v-for="(i,v) in options" :key="v" @click="tabsClick6(i,v)">
					<text :class="[
				        { hover: current6==v }, // 假设 current 是当前选中的索引  
				        { wordHover: i.wordId==true_wordId },  
					    { errHover: i.wordId==error_wordId}  
				      ]"> {{i.tran}}</text>
				</view>
			</view>
			<view class="warn_title marginTop-50 text-center" @click="warnClick">
				提示
			</view>
		</view>
		<u-gap height="80"></u-gap>
		<up-modal :show="errorShow" @confirm='confirm' confirmText='去查看'>
			<view class="text-center">
				哦哦，选错了。没关系我们去{{page}}-{{big_sort}}-{{small_sort}}看一下吧！
			</view>
		</up-modal>
		<!-- <up-modal :show="successShow" @confirm='confirm' confirmText='立即去'>
			<view class="text-center">
				继续为下个单词找家吧！
			</view>
		</up-modal> -->

		<view class="fixed" v-if="type==1||type==2||type==3">
			<view class="open_warn" @click="confirm">
				查看单词小家
			</view>
			<up-button @click="submit" size="normal" type="primary" text="确定"></up-button>
		</view>
		<view class="fixed" v-if="type==4||type==5||type==6">
			<view class="open_warn" v-if="type!=6" @click="confirm">
				查看单词小家
			</view>
			<up-button @click="continueClick" size="normal" type="primary" v-if="type==4||type==5"
				text="确定"></up-button>
				<up-button @click="continueClick" size="normal" type="primary" v-if="type==6&&isLast"
					text="继续为下个单词找家"></up-button>
			<u-gap height="10"></u-gap>
			
			<!-- <up-button @click="backIndex" size="normal" type="primary" :plain='true' text="返回首页"></up-button> -->
		</view>
		<up-popup :safeAreaInsetBottom="false" mode="center" round="5" :show="phoneShow" @close="close"
			@open="phoneShow = true">
			<view class="popupBox fontSize-28">
				<view class="width-full weight-700 text-center">
					{{page}}-{{big_sort}}-{{small_sort}}
				</view>

				<view class="flex column marginTop-30">
					<view class="flex items-center space-between height-120" v-for="(it,i) in wordList" :key="i">
						<view class="fontSize-30 weight-700" style="min-width: 200rpx;">
							{{parseInt(i)+1}}.{{it.wordHead}}
						</view>
						<view class="width-full">
							<view class="wordsDefaultText fontSize-24 ">
								<view class="marginBottom-5" v-for="(t,id) in returnVal(it.tran)" :key="id">
									{{t}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="width-full marginTop-30 box-sizing btns flex column items-center flex-center">
					<view class="marginTop-30 " style="width: 80%;">
						<up-button @click="close()" size="normal" type="primary" plain
							:text="IsPrompt==true?'记住了，继续为下个单词找家':'记住了'"></up-button>
						<view class="marginTop-15">
							<up-button @click="backIndex" size="normal" type="primary" :plain='true'
								text="结束,返回首页"></up-button>
						</view>
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="show" @close="close" @open="open" mode="center" round='20'>
			<view class="popup">
				<view class="popup_head">
					温馨提示
				</view>
				<view class="popup_cont">
					啊哦，你没有需要测试的单词，
				</view>
				<view class="popup_cont">
					请先去记单词
				</view>
				<view class="popup_cont">
					你还未开启16区记忆学习，学习后你才能进行“单词找区”测试
				</view>

				<view class="popup_btn" @click="back">
					知道了
				</view>
			</view>
		</up-popup>
		<image :src="big_pic" mode="" class="pos_img" v-if="type==2&&imagaShow==true" @click="imagaShow=false"></image>
		<image :src="small_pic" mode="" class="pos_img" v-if="type==3&&imagaShow==true" @click="imagaShow=false">
		</image>
		<u-gap height="120"></u-gap>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	import {
		image
	} from '../../../uni_modules/uview-plus/libs/function/test';
	const startWordTestApi = inject('startWordTest');
	const selectedOptionsApi = inject('selectedOptions')
	const getAreaWordsViewApi = inject('getAreaWordsView');
	const wordHead = ref('');
	const options = ref([]);
	const current = ref('-1')
	const current2 = ref('-1')
	const current3 = ref('-1')
	const current4 = ref('-1')
	const current5 = ref('-1')
	const current6 = ref('-1')
	const errorShow = ref(false)
	const phoneShow = ref(false);
	const successShow = ref(true);
	const test_id = ref('')
	const wordId = ref('')
	const emitData = ref({})
	const wordList = ref([]);
	const page = ref('')
	const big_sort = ref('')
	const small_sort = ref('')
	const type = ref(1);
	const markStatus = ref(false)
	const true_wordId = ref('')
	const temptrue_wordId = ref('')
	const max_page = ref(0)
	const show = ref(false)
	const IsPrompt = ref(false)
	const ifFirst = ref(true) //是否第一次进去
	const big_pic = ref('')
	const small_pic = ref('')
	const imagaShow = ref(false)
	const isBigFirst = ref(true)
	const isSmallFirst = ref(true)
	const error_wordId = ref('')
	const isLast=ref(false)
	const innerAudioContext = uni.createInnerAudioContext();
	// 测试使用 
	const true_wordHead = ref('')
	const total_xh = ref('')
	// 以上部分测试使用 不用请注释
	innerAudioContext.autoplay = false;
	innerAudioContext.onCanplay(() => {});
	innerAudioContext.onPlay((e) => {})
	innerAudioContext.onEnded((e) => {})
	
	const options2 = ref([{
			name: 1,
		},
		{
			name: 2,

		},
		{
			name: 3,
		},
		{
			name: 4,
		},
	])
	const sortList = ref([{
			name: 1,
		},
		{
			name: 2,

		},
		{
			name: 3,
		},
		{
			name: 4,
		},
		{
			name: 5,
		},
	])

	onLoad(() => {
	
		startWordTestApi({

		}).then(res => {
			console.log(res, 196)
			if (res.status == 201) {
				type.value = 0
				show.value = true
			} else {
				wordHead.value = res.wordInfo.wordHead;
				options.value = res.options
				test_id.value = res.wordInfo.test_id
				page.value = res.wordInfo.total_page
				big_sort.value = res.wordInfo.total_big_sort
				max_page.value = res.wordInfo.max_page
				small_sort.value = res.wordInfo.total_small_sort
				temptrue_wordId.value = res.wordInfo.true_wordId
				big_pic.value = res.pics.big_pic
				small_pic.value = res.pics.small_pic
				// 下面两行测试使用 不用注释
				true_wordHead.value = res.wordInfo.true_wordHead
				total_xh.value = res.wordInfo.total_xh
			}

		});
	});
	onShow(() => {


	});
	onUnload(() => {
		if (type.value != 0) {
			selectedOptionsApi({
				test_id: test_id.value,
				type: type.value,
				options: wordId.value,
			}).then(es => {

			})
		}
	});
	onHide(() => {
		if (type.value != 0) {
			selectedOptionsApi({
				test_id: test_id.value,
				type: type.value,
				options: wordId.value,
			}).then(es => {

			})
		}
	});

	const tabsClick = (i, v) => {
		current.value = v
		wordId.value = i.wordId
	}
	const tabsClick2 = (i, v) => {
		current2.value = v
		wordId.value = i.name
	}
	const tabsClick3 = (i, v) => {
		current3.value = v
		wordId.value = i.name
	}
	const tabsClick4 = (i, v) => {
		current4.value = v
		wordId.value = i.name
	}
	const tabsClick5 = (i, v) => {
		current5.value = v
		wordId.value = i
	}
	const tabsClick6 = (i, v) => {
		if (markStatus.value) {

		} else {
			current6.value = v
			wordId.value = i.wordId
			error_wordId.value = i.wordId
			true_wordId.value = temptrue_wordId.value
			isLast.value=true
			submit()
		}
	}
	const warnClick = () => {
		markStatus.value = !markStatus.value
		true_wordId.value = temptrue_wordId.value
	}
	const continueClick = () => {
		if (type.value == 4 || type.value == 5) {
			submit()
		} else {
			
			uni.redirectTo({
				url: '/pages/index/test/wordSearchArea'
			})
		}
	}
	const backIndex = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	const back = () => {
		uni.navigateBack()
	}
	const playClick = () => {
		innerAudioContext.stop();
		innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${wordHead.value}&type=1`;
		innerAudioContext.play();
	}
	const confirm = () => {
		errorShow.value = false
		IsPrompt.value = true
		getAreaWordsViewApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
		}).then(res => {
			console.log(res, 115)
			wordList.value = res.wordList
			phoneShow.value = true
		})
	}
	const submit = () => {
		if (wordId.value == '') {
			uni.showToast({
				title: '请先选择您的答案！',
				icon: 'none'
			})
		} else {
			selectedOptionsApi({
				test_id: test_id.value,
				type: type.value,
				options: wordId.value,
			}).then(es => {
				console.log(es, 77)
				if (es.is_true == 0) {
					errorShow.value = true

				} else if (es.is_true == 1) {
					if (type.value <= 5) {
						uni.showToast({
							title: '哇！记忆力真好，继续挑战',
							icon: 'none'
						})
						type.value++
						if (type.value == 2) {
							if (isBigFirst.value) {
							let tempIsBigFirst=uni.getStorageSync('isBigFirst')
								if(tempIsBigFirst===''){
										console.log('为什么生效了')
									imagaShow.value = true
									isBigFirst.value = false
									uni.setStorageSync('isBigFirst', isBigFirst.value)
								}
							}

						}
						if (type.value == 3) {
								if (isSmallFirst.value ) {
									if(uni.getStorageSync('isSmallFirst')===''){
										imagaShow.value = true
										isSmallFirst.value = false
										uni.setStorageSync('isSmallFirst', isSmallFirst.value)
									}
									
								}

						}
						
					}
				}
			})
		}
	}
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}
	const close = () => {
		if (IsPrompt.value == true) {
			selectedOptionsApi({
				test_id: test_id.value,
				type: type.value,
				options: wordId.value,
			}).then(es => {
				uni.redirectTo({
					url: '/pages/index/test/wordSearchArea'
				})
			})

		} else {
			phoneShow.value = false
			wordId.value = ''
			if (type.value < 6) {
				type.value++
			} else {
				type.value == 6

			}
		}
	}
</script>

<style scoped lang="scss">
	.head {
		padding: 20rpx 30rpx;

		.head_title {
			font-size: 30rpx;
			color: #000;
		}

		.head_cont {
			font-size: 24rpx;
			color: #666;
		}
	}

	.word_lists {
		width: 500rpx;
		margin: 0 auto;

		.word_list {
			width: 240rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 15rpx;
			border: 1rpx solid #999;
			font-size: 24rpx;
		}



		.word_list2 {
			width: 240rpx;
			height: 120rpx;
			line-height: 120rpx;
			border: 1rpx solid #999;
			font-size: 24rpx;
		}

		.hover {
			border: 1rpx solid #3c9cff;
			color: #3c9cff;
		}
	}

	.word_lists_other {
		width: 690rpx;

		.word_list4 {
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			border: 1rpx solid #999;
			font-size: 24rpx;
			border-radius: 15rpx;
		}

		.word_list5 {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			border: 1rpx solid #999;
			font-size: 24rpx;
		}

		.hover {
			border: 1rpx solid #3c9cff;
			color: #3c9cff;
		}
	}

	.fixed {
		bottom: 20rpx;
		width: 690rpx;
		left: 30rpx;
	}

	.popupBox {
		width: 80vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}

	.word_name {
		color: #000;
		font-size: 36rpx;
	}

	.word_pro {
		font-size: 28rpx;
	}

	.word_warn {
		color: #999;
		font-size: 24rpx;
	}

	.select_lists {
		margin-top: 80rpx;

		.select_list {

			color: #000;
			padding: 20rpx;
			font-size: 24rpx;
			background-color: #f5f5f5;
			position: relative;

			.hover,
			.errHover {
				transition: all .3s;

				&::before {
					content: "";
					position: absolute;
					inset: 0;
					// top: -10px;
					// left: -10px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #ffbfbf;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					content: "";
					position: absolute;
					inset: 0;
					// top: -10px;
					// left: -10px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #ffbfbf;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					animation: div5Ani 1s -0.5s linear;
				}
			}

			.wordHover {
				transition: all .3s;

				&::before {
					content: "";
					position: absolute;
					inset: 0;
					// top: -0px;
					// left: -0px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #05b602;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					content: "";
					position: absolute;
					inset: 0;
					// top: -10px;
					// left: -10px;
					// right: -10px;
					// bottom: -10px;
					border: 2px solid #05b602;
					border-radius: 10px;
					animation: div5Ani 1s linear;
				}

				&::after {
					animation: div5Ani 1s -0.5s linear;
				}
			}

			@keyframes div5Ani {

				0%,
				100% {
					clip-path: inset(0 0 98% 0);
				}

				25% {
					clip-path: inset(0 98% 0 0);
				}

				50% {
					clip-path: inset(98% 0 0 0);
				}

				75% {
					clip-path: inset(0 0 0 98%);
				}
			}
		}


	}

	.warn_title {
		font-size: 24rpx;
	}

	.popup {
		width: 690rpx;
		height: 400rpx;

		.popup_head {
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			padding: 30rpx;
		}

		.popup_cont {
			font-size: 24rpx;
			color: #000;
			text-align: left;
			width: 400rpx;
			margin: 0 auto;
		}

		.popup_btn {
			width: 300rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			margin: 30rpx auto;
			border: 1rpx solid #000;
		}
	}

	.open_warn {
		text-align: center;
		padding: 30rpx;
		color: red;
		font-size: 24rpx;
	}

	.pos_img {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
</style>